import React, { Component, PureComponent } from 'react'

import { Modal, Button } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';

export default class WrapModal extends PureComponent {

  state = {
    fullScreen: false
  }

  constructor(props){
    super(props)
    'fullScreen' in props && (this.state.fullScreen = props.fullScreen)
  }

  afterClose = () => {
    typeof this.props.afterClose === 'function' && this.props.afterClose()
    this.setState({ fullScreen: false})
  }

  getFullscreenIcon = () => {
    const { fullScreen } = this.state
    if (fullScreen){
      return <FullscreenExitOutlined
        className="full-icon-modal"
        onClick={() => { this.setState({ fullScreen: !this.state.fullScreen }) }} />
    } else {
      return <FullscreenOutlined
        className="full-icon-modal"
        onClick={() => { this.setState({ fullScreen: !this.state.fullScreen }) }} />
    }
  }

  render() {
    let { wrapClassName = '', afterClose, title, ...rest } = this.props
    const { fullScreen } = this.state
    if (fullScreen){
      wrapClassName += ' warp-full-modal-own'
    }else{
      wrapClassName.replace('warp-full-modal-own', '')
    }
    return (
      <Modal {...rest} afterClose={this.afterClose} wrapClassName={wrapClassName } title={
        <>
          { title }
          <span className="full-span-wrap">
            {
              this.getFullscreenIcon()
            }
          </span>
        </>
      }>
        {
          this.props.children
        }
      </Modal>
    )
  }
}
